<template>

    <div class="merchantTag" v-loading="loading">
        <div class="merchantTagTable">
            <div class="merchantSearch">
                <el-form :inline="true">
                    <el-form-item  label="商户名称">
                        <el-input v-model="name" placeholder="请输入商户名称"></el-input>
                    </el-form-item>

                    <el-button
                            @click="getMerchantList(1,name)"
                            type="primary"
                            icon="el-icon-search"
                            circle>
                    </el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-form>
            </div>
            <el-table
                    :data="merchantList"
                    border
                    style="width: 711px">
                <el-table-column
                        align="center"
                        prop="name"
                        label="商户名称"
                        width="230">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="class_name"
                        label="商户分类"
                        width="180">
                </el-table-column>
                <el-table-column
                        width="150"
                        align="center"
                        prop="logo"
                        label="商户logo">
                    <template slot-scope="scope">
                        <el-image
                            :src="scope.row.logo"
                            style="width: 80px;height: 80px"
                            :fit="fit"
                        >
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        width="150">
                    <template slot-scope="scope">
                        <el-button @click="getStoreTagList(scope.row.id)" type="primary">设置标签</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="merchantPage">
                <el-pagination
                    @current-change="getMerchantList"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="10"
                >

                </el-pagination>
            </div>
        </div>

        <el-dialog width="500px" title="设置标签" :visible.sync="setStoreTagVisible">
            <el-form>
                <el-form-item label="标签" :label-width="formLabelWidth">
                    <el-select multiple v-model="storeTag" placeholder="请选择标签">
                        <el-option
                                v-for="item in tagList"
                                :key="item.tag_name"
                                :label="item.tag_name"
                                :value="item.tag_name">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="setStoreTagVisible = false">取 消</el-button>
                <el-button type="primary" @click="setStoreTag()">确 定</el-button>
            </div>
        </el-dialog>

        <div style="height: 100px"></div>
    </div>
</template>

<script>

    export default {
        name: 'settingMerchantTags',
        data(){
            return {
                merchantList: [],
                loading: false,
                total: 0,
                fit: 'contain',
                name: '',
                tagList: [],
                storeTag: [],
                setStoreTagVisible: false,
                formLabelWidth: '100px',
                store_id: ''
            }
        },
        methods:{
            //获取商户列表
            getMerchantList(page,name){
                this.loading = true;
                this.$http.get('/web/store/index',{
                    params: {
                        token: localStorage.getItem('user_token'),
                        page: page,
                        pageSize: 10,
                        name: name
                    }
                }).then( response => {
                    if (response.data.status === 'success'){
                        this.merchantList = response.data.data.list;
                        this.total = response.data.data.pagination.total;
                    }
                    this.loading = false;
                }).catch( () => {
                    this.loading = false;
                })
            },

            //获取标签列表
            getTagList(){
                this.loading = true;
                this.$http.get('/web/tag/index', {
                    params:{
                        token: localStorage.getItem('user_token'),
                        pageSize: 999
                    }
                }).then( response => {
                    if (response.data.status === 'success'){
                        this.tagList = response.data.data.list;
                    }
                    this.loading = false;
                }).catch( () => {
                    this.loading = false;
                })
            },

            //获取商户标签
            getStoreTagList(id){
                this.loading = true;
                this.$http.get('/store/tags/list',{
                    params: {
                        token: localStorage.getItem('user_token'),
                        pageSize: 999,
                        store_id: id
                    }
                }).then( response => {
                    if (response.data.status === 'success'){
                        this.storeTag = [];
                        response.data.data.list.forEach((value) => {
                            this.storeTag.push(value.tag_name)
                        });
                        this.store_id = id;
                        this.setStoreTagVisible = true;
                    }
                    this.loading = false;
                }).catch( () => {
                    this.loading = false;
                })
            },

            handleReset(){
                this.name = '';
                this.getMerchantList();
            },

            setStoreTag(){
                console.log(this.storeTag,this.store_id);
                this.loading = true;
                this.$http.post('/store/tags/save',{
                    token: localStorage.getItem('user_token'),
                    tag: this.storeTag,
                    store_id: this.store_id
                }).then( response => {
                    if (response.data.status === 'success'){
                        this.$message.success('设置成功');
                        this.getMerchantList();
                        this.getTagList();
                        this.setStoreTagVisible = false;
                    }
                    this.loading = false;
                }).catch( () => {
                    this.loading = false;
                })
            }
        },
        mounted() {
            this.getMerchantList();
            this.getTagList();
        }
    }
</script>

<style>

    .merchantTag{
        width: 100%;
    }
    .merchantTagTable{
        width: 711px;
        background-color: white;
        margin: auto;
        margin-top: 50px;
    }
    .merchantPage{
        margin-top: 24px;
    }
</style>
